{% extends "base.html" %}
{% block stylesheets %}
{% endblock %}
{% block content %}
<div class="uk-section-default">
    <div class="uk-section uk-section-xlarge uk-light uk-background-cover" style="background-image: url({{ url_for('views.themes', path='img/team.png') }})">
        <div class="uk-container uk-container-medium uk-text-center">
            <h1 class='uk-heading-primary'>Create Team</h1>
        </div>
    </div>
</div>
{% if errors %}
<div class="uk-section-primary uk-preserve-color">
    <div class="uk-container uk-container-medium uk-text-center">
        <div id='errors' class='uk-margin-top'>
            {% for error in errors %}
            <div class="uk-alert-danger" uk-alert>
                <a class="uk-alert-close" uk-close></a>
                <h3 class="uk-text-center">{{ error }}</h3>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}
<div class="uk-section uk-section-secondary">
    <div class="uk-container uk-container-small">
        <p>After creating your team, share the team name and password with your teammates so they can join your team!</p>
        <div class="uk-flex uk-flex-center">
            <form method="POST" onsubmit="disable(submit)">
                <fieldset class="uk-fieldset">
                    <div class="uk-margin">
                        <div class="uk-inline uk-width-large@s">
                            <span class="uk-form-icon" uk-icon="icon: users"></span>
                            <input autofocus="true" class="uk-input uk-form-large " id="name" name="name" placeholder="Team Name" required type="text" value="">
                        </div>
                    </div>
                    <div class="uk-margin">
                        <div class="uk-inline uk-width-large@s">
                            <span class="uk-form-icon" uk-icon="icon: lock"></span>
                            <input class="uk-input uk-form-large" id="password" name="password" placeholder="Team Password" required type="password" value="">
                        </div>
                    </div>
                    <div class="uk-margin uk-text-center">
                        <input class="uk-button uk-button-large uk-button-primary uk-width-medium uk-margin-small-bottom" id="submit" name="submit" type="submit" value="Submit">
                    </div>
                    <input type="hidden" name="nonce" value="{{ nonce }}">
                </fieldset>
            </form>
        </div>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
function disable(el) {
    var oldLabel = el.value;
    el.value = "Logging In...";
    el.disabled = true;
}
</script>
{% endblock %}